<template>
  <div style=" display: flex;flex: 1;flex-direction: column;width: 1000px;">
      <el-form :model="ruleForm" >
        <el-form-item label="商品图片"  style="display: flex;flex-direction: row">
          <el-upload
            ref="upload"
            action="http://127.0.0.1:8080/fileUpload"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            list-type="picture-card"
            :data="upLoadData"
            :limit=limitNum
            :file-list="fileList"
            :auto-upload="true"
            :on-success="successUpload"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :before-upload="handleBeforeUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="商品名称" style="display: flex;flex-direction: row;">
          <el-input style="width: 300px" v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="商品类目" style="display: flex;flex-direction: row">
          <el-select  v-model="ruleForm.region" placeholder="请选择商品类目" style="width: 300px; display: flex;flex-direction: row;">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <!--<el-form-item label="商品品牌" v-if="dialogVisible2" >-->
          <!--<el-select  placeholder="请选择商品品牌" style="width: 300px; display: flex;flex-direction: row;">-->
            <!--<el-option label="区域一" value="shanghai1"></el-option>-->
            <!--<el-option label="区域二" value="beijing1"></el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->

        <el-form-item label="商品价格" style="display: flex;flex-direction: row;">
          <el-input-number v-model="ruleForm.price" controls-position="right" @change="handleChange" :min="0" ></el-input-number>
        </el-form-item>

        <el-form-item label="商品规格" style="display: flex;flex-direction: row;">
            <!--<div  v-for="(value,index) in sites" v-bind:key="">-->
              <!--{{value}}   {{index}}-->
            <!--</div>-->

          <el-tag :key="tag" v-for="tag in sites" type="success">
            {{tag}}
          </el-tag>

          <el-button size="mini" @click="addView">添加规格</el-button>
        </el-form-item>


        <el-form-item style="display: flex;flex-direction: row;margin-top: 200px">
          <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
          <el-button size="small" @click="testRef">取消</el-button>
        </el-form-item>
      </el-form>
    </div>


</template>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
    width: 90px;
  }
</style>

<script>
  export default {
    data() {
      return {
        sites:["1","2","3"],
        dialogImageUrl: '',
        dialogVisible: false,
        dialogVisible2: true,
        limitNum: 3,
        upLoadData:{
          "uid":2,
          "name":"张帆"
        },
        fileList: [],
        ruleForm: {
          fileList: [],
          price:0
        },
      };
    },
    methods: {
// 上传文件之前的钩子
      handleBeforeUpload(file){
        console.log('before')
        if(!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
          this.$notify.warning({
            title: '警告',
            message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
          })
        }
        let size = file.size / 1024 / 1024 / 2
        if(size > 2) {
          this.$notify.warning({
            title: '警告',
            message: '图片大小必须小于2M'
          })
        }
      },
      // 文件超出个数限制时的钩子
      handleExceed(files, fileList) {

      },
      // 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      handleChange(file,files){
        //console.log(files.length)
      },
      successUpload(response, file, fileList){
        this.ruleForm.fileList.push(response)
      },
      uploadFile() {
        //this.$refs.upload.submit()
        // this.$refs.upload.uploadFiles
        // this.fileList = []

        console.log(this.ruleForm.fileList)

      },
      testRef(){
        console.log(this.$refs.divRef)
      },
      handleInput(e){
        console.log(e)
        //this.ruleForm.price=e.target.value.replace(/[^\d]/g,'');
      },
      addView(){
        this.sites.push("A")
      }
    }
  }
</script>
